<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<jsp:include page="/common/common-js.jsp"></jsp:include>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" id="menu-toggle">
                飞狐教育
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <%--    <ul class="nav navbar-nav">
                <li><a href="#">校园风采</a></li>
                <li><a href="#">师资团队</a></li>
                <li><a href="#">明星学员</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Multi Level <b class="caret"></b></a>
                    <ul class="dropdown-menu menu-top">
                        <li><a href="#">Level 1</a></li>
                        <li><a href="#">Level 1</a></li>



                        <li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a>
                            <ul class="dropdown-menu">
                                <li><a tabindex="-1" href="#">Level 2</a></li>
                                <li><a href="#">Level 2</a></li>
                                <li><a href="#">Level 2</a></li>
                            </ul>
                        </li>


                    </ul>
                </li>


            </ul>--%>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<style>
    .dropdown:hover .menu-top {
        display: block;
    }

    .dropdown-submenu{
        position:relative;
    }

    .dropdown-submenu > .dropdown-menu{
        top:0;
        left:100%;
        margin-top:-6px;
        margin-left:-1px;
        -webkit-border-radius:0 6px 6px 6px;
        -moz-border-radius:0 6px 6px 6px;
        border-radius:0 6px 6px 6px;
    }

    .dropdown-submenu:hover > .dropdown-menu{
        display:block;
    }

    .dropdown-submenu > a:after{
        display:block;
        content:" ";
        float:right;
        width:0;
        height:0;
        border-color:transparent;
        border-style:solid;
        border-width:5px 0 5px 5px;
        border-left-color:#cccccc;
        margin-top:5px;
        margin-right:-10px;
    }

    .dropdown-submenu:hover > a:after{
        border-left-color:#ffffff;
    }

    .dropdown-submenu .pull-left{
        float:none;
    }

    .dropdown-submenu.pull-left > .dropdown-menu{
        left:-100%;
        margin-left:10px;
        -webkit-border-radius:6px 0 6px 6px;
        -moz-border-radius:6px 0 6px 6px;
        border-radius:6px 0 6px 6px;
    }

</style>

<script>
    $(function () {
        jqueryAjax(
            "<%=basePath%>menu/queryMenu.do",
            null,
            function(result){
                if(result.code==0){
                    var firstMenuId = result.data[0].menuId; //根节点id

                    var menuHTML = "<ul class=\"nav navbar-nav\">";
                    for (var i = 1; i < result.data.length; i++) {
                        var menu = result.data[i];
                        if(menu.menuPid == firstMenuId)//根节点
                        {
                            if(isChild(result.data,menu.menuId))//如果有子节点
                            {
                                menuHTML += "<li class=\"dropdown\">";
                                menuHTML += "   <a href=\"#\" >"+menu.menuName+"<b class=\"caret\"></b></a>";
                                menuHTML += "   <ul class=\"dropdown-menu menu-top\">";
                                menuHTML += initMenu(result.data,menu.menuId);
                                menuHTML += "   </ul>";
                                menuHTML += "</li>";
                            }else
                            {
                                menuHTML += "<li><a href=\""+menu.menuUrl+"\">"+menu.menuName+"</a></li>";
                            }
                        }

                    }
                    menuHTML += "</ul>";
                    jqueryId("bs-example-navbar-collapse-1").html(menuHTML);
                }
            }
        )
    })

    function initMenu(result,menuId){

        var menuHTML="";
        for (var i = 1; i < result.length; i++) {
            var menu = result[i];

            if(menu.menuPid==menuId)//代表属于它的子节点
            {

                if(isChild(result,menu.menuId))//如果有子节点
                {
                    menuHTML += "<li class=\"dropdown-submenu\"> <a href=\"#\">"+menu.menuName+"</a>";
                    menuHTML += "<ul class=\"dropdown-menu\">";
                    menuHTML += initMenu(result,menu.menuId);
                    menuHTML += "</ul>";
                    menuHTML += "</li>";
                }else
                {
                    menuHTML += "   <li><a href='"+menu.menuUrl+"'>"+menu.menuName+"</a></li>";
                }
            }
        }
        return menuHTML;
    }

    function isChild(menuArray,id){
        for (var i = 1; i < menuArray.length; i++) {
            if(menuArray[i].menuPid == id )
            {
                return true;
            }
        }
        return false;
    }
</script>